<template>
  <div class="text-collapse" :class="['bg-default']">
    <span class="text-content"> 物流：{{ displayText }} </span>

    <!-- 标签：独立于文字流，不影响换行 -->
    <div class="tag-container">
      <span class="tag tag-default" @click.stop="handleTagClick"> 详情 </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  text: string;
  limit?: number;
}

const props = defineProps<Props>();
const emit = defineEmits(['tag-click']);

// 默认展示字数
const limit = computed(() => props.limit ?? 50);

// 是否超出限制
const isOverflow = computed(() => props.text?.length > limit.value);

// 展示文字
const displayText = computed(() => {
  if (!isOverflow.value) return props.text;
  return props.text.slice(0, limit.value) + '...';
});

// 点击标签
function handleTagClick() {
  emit('tag-click');
}
</script>

<style scoped>
.text-collapse {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: #222;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.25s ease;
}

.bg-default {
  background: #ffffffa3;
  box-shadow: inset 0 0 0 1px #e5e5e5;
}

/* 文本主体 */
.text-content {
  color: #333;
  font-weight: 400;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
  line-height: 1.4;
}

.tag-container {
  display: flex;
  justify-content: flex-end;
}

/* 标签：小药丸形态 */
.tag {
  display: inline-block;
  padding: 0px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.tag-default {
  background-color: #ffffff;
  color: #3f4248;
  border-color: #dcdfe6;
}
</style>
